<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Log viewer</title>
    <style>
        html
        {
            border: none;
            font-size: 14px;
            line-height: 1.5;
            background-color: #FFFFCC;
            overflow: hidden;
        }
        body
        {
            margin: 0;
            width: 100%;
            height: 100%;
        }
        input, button, textarea, label
        {
            font: 11px tahoma;
            vertical-align: middle;
        }
        #toolbar
        {
            top: 0;
            right: 0;
            width: 100%;
            text-align: center;
            padding-bottom: 6px;
            font-size: 12px;
        }
        #toolbar div
        {
            float: left;
            margin: 3px 3px 0px 3px;
        }
        #toolbar input.button
        {
            height: 2em;
            width: 50px;
        }
        #logs
        {
            font: 12px 'Courier New' monospace;
            background: white;
        }
        #logs p
        {
            margin: 0.25em 0;
        }
    </style>

    <script type="text/javascript" src="zdcore.js"></script>

    <script type="text/javascript">
$setto(this, {$$logLevel:{Enabled: false}});
eval($using("sys.log"));
var logContainer = null, listAppender, list, index = 0, delay = 1000;
if (typeof dialogArguments == 'undefined'){
	setTimeout(init, delay);
} else {init();}
function init() {
	listAppender = dialogArguments.appender;
	list = listAppender.getList();
	setInterval(refresh, delay);
}
function reload() {
	index = 0;
	logContainer = logContainer || $('logs');
	while (logContainer.hasChildNodes()) logContainer.removeChild(logContainer.lastChild);
	refresh();
}
function refresh() {
	logContainer = logContainer || $('logs');
	while (index < list.length) {
		var evt = list[index];
		var s = '[' + (evt.time.toXmlString(true)) + '] ' + evt.message;
		var p = document.createElement('p');
		p.style.color = getColor(evt.level);
		p.innerText = s;
		logContainer.appendChild(p);
		index++;
	}
	if ($('auto-scroll').checked) {logContainer.scrollTop=logContainer.scrollHeight;}
}
function getColor(l) {
	if (l <= logLevel.TRACE) return '#0000FF';
	else if (l <= logLevel.DEBUG) return '#009999';
	else if (l <= logLevel.INFO) return '#333333';
	else if (l <= logLevel.WARN) return '#FF9900';
	else if (l <= logLevel.ERROR) return '#FF0000';
	else if (l <= logLevel.FATAL) return '#FF00CC';
	else return '#CCCCCC';
}
function clearLog() {
	listAppender.clearList();
	reload();
}
function zoomlogs(){
	logContainer = logContainer || $('logs');
	var wd = parseInt(window.dialogWidth) || parseInt(window.innerWidth);
	var ht = parseInt(window.dialogHeight) || parseInt(window.innerHeight);
	logContainer.style.width = wd-6 + "px";
	logContainer.style.height = ht-parseInt($('toolbar').clientHeight)-6 + "px";
}
function larger() {
	window.moveBy(-160, 0);
	window.resizeBy(160, 160);
	zoomlogs();
}
function smaller() {
	window.moveBy(160, 0);
	window.resizeBy(-160, -160);
	zoomlogs();
}
window.onresize=zoomlogs;
    </script>

</head>
<body onload="zoomlogs();">
    <div id="toolbar">
        <fieldset>
            <legend>Controller</legend>
            <div>
                <input type="button" class="button" accesskey="r" onclick="reload()" value="Reload" /></div>
            <div>
                <input type="button" class="button" accesskey="c" onclick="clearLog()" value="Clear" /></div>
            <div>
                <input type="button" class="button" accesskey="l" onclick="larger()" value="Larger" /></div>
            <div>
                <input type="button" class="button" accesskey="s" onclick="smaller()" value="Smaller" /></div>
            <div>
                <input id="auto-scroll" type="checkbox" class="checkbox" checked="checked" accesskey="a"
                    value="auto" /><label for="auto-scroll">Auto scroll</label></div>
        </fieldset>
    </div>
    <textarea id="logs"></textarea>
</body>
</html>
